<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>The ZUU</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/styles.css" rel="stylesheet">
    
    <!-- Nivo slider styles -->
    <link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider/style.css" type="text/css" media="screen" />
  </head>
  <body>
  <div class="container" style="background: white;">
  	<!-- Header region-->
  	<div id="header">
  		<!-- header-upper-->
  		<div id="header_upper" class="container">
  			<div class="row">
  				<div id="logo" class="span4">
  					<a style="font-size:36px" href="index.html">Your Logo is Here</a>
  				</div>
  			</div>
  		</div>
  		<!-- navigation bar-->
  		<div class="navbar">
  			<div class="navbar-inner">
  				<div class="container">
  					<a data-toggle="collapse" data-target=".nav-collapse" class="btn btn-navbar">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</a>
  					<div class="nav-collapse">
  						<ul class="nav">
  							<li class="active"><a href="#">Home</a></li>
  							<li class="dropdown">
  								<a href="collection.html" data-toggle="dropdown" class="dropdown-toggle">Collection 1<b class="caret"></b></a>
  								<ul class="dropdown-menu">
  									<li><a href="collection.html">Sub Collection 1</a></li>
  									<li><a href="collection.html">Sub Collection 2</a></li>
  								</ul>
  							</li>
  							<li><a href="collection.html">Collection 2</a></li>
  							<li><a href="#">Gallery</a></li>
  						</ul>
  					</div>
  				</div>
  			</div>
  		</div>
  		<!-- end navigation bar-->
  		
  		<!-- product detail-->
  		<div class="row">
  			<!--  <span class="span8">
  				<div class="visible-desktop visible-tablet hidden-phone">-->
  				<div class="span4">
  					<div class="zoom-image margcenter">
	 						<a name="product_main" href='assets/images/H_01.jpg' class = 'cloud-zoom thumbnail1' id='zoom1' rel="adjustX: 10, adjustY:-4, softFocus:false, zoomWidth:420">
	           					<img src="assets/images/H_01.jpg" alt='' align="left" title="" />
	       					</a>
	 					<!-- <div class="span3" style="margin-left: 70px; margin-top: 8px;">
	 					</div>--> 					
  					</div>
  					<div class="span1 margcenter" >
 						<a name="product_other" href='assets/images/H_02_01.png' class='cloud-zoom-gallery thumbnail1' title='Thumbnail 1' rel="useZoom: 'zoom1', smallImage: 'assets/images/H_02_01.png' ">
       						<img src="assets/images/H_02_01.png" alt = "Thumbnail 1"/>
       					</a>
	 				</div>
  					<div class="span1 margcenter">
 						<a name="product_other" href='assets/images/H_01_1.png' class='cloud-zoom-gallery thumbnail1' title='Thumbnail 1' rel="useZoom: 'zoom1', smallImage: 'assets/images/H_01_1.png' ">
       						<img src="assets/images/H_01_1.png" alt = "Thumbnail 1"/>
       					</a>
	 				</div>
	 				
  					<!-- <div class="row">
  						<h2 class="span8">Related products</h2>
  					</div>
  					<ul class="thumbnails row">
  						<li class="span2 thumbnail" style="magin-left:0px;">
  							<img src="assets/images/col1-img1.jpg">
  						</li>
  						<li class="span2 thumbnail">
  							<img src="assets/images/col1-img2.jpg">
  						</li>
  						<li class="span2 thumbnail">
  							<img src="assets/images/col1-img1.jpg">
  						</li>
  					</ul> -->
  					</div>
  				<!-- </div>
  			</span> -->
  			<div class="middle-bar">
  			<!-- <form  >
  				<h2>Order form</h2>
  				<hr/>
  				<h4>Your Information</h4>
  				<label>Name:</label>
  				<input type="text" class="span4">
  				<label>Email:</label>
  				<input type="text" class="span4">
  				<label>Phone number:</label>
  				<input type="text" class="span4">
  				<hr/>
  				<h4>Product details</h4>
  				<label>Sizes:</label>
  				<select>
  					<option>S</option>
  					<option>M</option>
  				</select>
  				<label>Quantity:</label>
  				<input type="text" class="span4">
  				<input class="btn btn-primary" type="submit" value="Order">
  				<input class="btn btn-danger" type="reset" value="Reset">
  			</form> -->
	  			<h2>Product name</h2>
	  			<h4>Giá: 500,000 VND</h4><br/>
	  			<p>Chúng tôi cung cấp sản phẩm theo số đo của quý khách. Chúng tôi có thể tiến hành lấy số đo cho khách hàng trong nội thành TP.HCM và Vũng Tàu. Đối với các bạn ở ngoài hai khu vực trên, chúng tôi sẽ may theo số đo các bạn cung cấp. </p>
	  			<p>Thời gian giao hàng trong vòng 2-3 tuần kể từ ngày chúng tôi nhận được tiền cọc và số đo của quý khách (trong trường hợp số đo của hàng mẫu không thích hợp với quý khách).</p>
	  			<div class="divide"></div>
  			</div>
			<div class="left-bar" style="margin-left: 20px;">
				<div class="pricebox">
					<span class="pricelabel">Giá:</span>
					<span class="pricevalue">500,000 VND</span>
					<span class="stockstatus">Còn hàng!</span>
					
				</div>
				<form action="">
						<button class="buttonOrder">
							<span class="buttonText">Đặt hàng</span>
						</button>
				</form>
			</div>  			
  		</div>
   	</div>
   	<!-- End Header region-->
  </div>
  <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/bootstrap-transition.js"></script>
    <script src="assets/js/bootstrap-alert.js"></script>
    <script src="assets/js/bootstrap-modal.js"></script>
    <script src="assets/js/bootstrap-dropdown.js"></script>
    <script src="assets/js/bootstrap-scrollspy.js"></script>
    <script src="assets/js/bootstrap-tab.js"></script>
    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>
    <script src="assets/js/bootstrap-button.js"></script>
    <script src="assets/js/bootstrap-collapse.js"></script>
    <script src="assets/js/bootstrap-carousel.js"></script>
    <script src="assets/js/bootstrap-typeahead.js"></script>
    <script src="assets/js/application.js"></script>
    
	<script src="assets/js/cloud-zoom.1.0.2.js"></script>
	
	<script type="text/javascript">
		$(document).ready(function(){
			//Handle the product view behavior : when hover to an image, the others will blur
			$("li[name='product_other']").hover(function(){
				$(this).siblings().stop().fadeTo(500,0.5);
			}, function(){
				$(this).siblings().stop().fadeTo(500,1);
			});
		});
	</script>
  </body>
</html>